<template>
  <div class="members">
    <div class="tabBar">
        <div v-for="(item, index) in navLists"
        :key="index" class="boxNoClick" :class="{boxClick:changeStyle == index}" @click="isShow(index)">{{item.text}}</div>
    </div>

    <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多数据了"
        @load="onLoad"
      >
      <ul class="dataList" v-for="item in list" :key="item.userId">
          <li @click="$troute.query('mmDetail',item.userId)">
            <div class="img-box">
              <img :src="'https://i.hunnu.edu.cn/ums/avatar/'+item.xgno" width="50px" alt="">
            </div>

            <div class="content">
              <p><b>{{item.userName}}/{{item.unionName}}</b></p>
              <span>{{item.birthday | formatDate}}</span>
            </div>

            <div  @click.stop="itemData = item,isAudit = true" v-if="changeStyle == 0  && (item.registerStatus == 0&&identity.isUnionManager|| item.registerStatus == 1&&identity.isSUnionManager)" class="audit">
              审批
            </div>
<!--            <div  @click.stop="itemData = item,isAudit = true" v-if="changeStyle == 0  &&" class="audit">-->
<!--              审批-->
<!--            </div>-->
            <div v-if="item.registerStatus == 2" class="auditPass">
              审核通过
            </div>

            <div v-if="item.registerStatus == 3" class="auditPass">
              驳回
            </div>

          </li>
      </ul>
    </van-list>

    <van-dialog closeOnClickOverlay v-model="isAudit" title="审核" confirm-button-text="通过" cancel-button-text="不同意" show-cancel-button @confirm="Audit" @cancel="disagree">
      <p style="font-size:14px;text-align:center;padding: 10px 0">是否审核通过</p>
    </van-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import api from "@/data/api/index.js";
import { Dialog } from 'vant'
import { Notify } from 'vant';

// 全局注册
Vue.use(Notify);
Vue.use(Dialog);
export default {
    //过滤器
    filters:{
      formatDate(date) {
        const nDate = new Date(date)
        const y = nDate.getFullYear()
        const m = (nDate.getMonth()+1).toString().padStart(2,0)
        const d = nDate.getDate().toString().padStart(2,0)
        return y+'-'+m+'-'+d
      }
    },
  data() {
    return{
      navLists:[
          {
            "text":"待审会员"
          },
          {
            "text":"已审核会员"
          }
        ],
      changeStyle:0,
      list: [],
      finished: false,
      loading: false,
      params:{
        page:1,
        rows:10
      },
      count: 0,
      itemData: "",
      identity: {},
      isAudit: false
    }
  },
  mounted() {
    this.identity = JSON.parse(sessionStorage.getItem("jurisdiction"));
  },
  methods: {
    async onLoad() {
      // 异步更新数据 todo
        if(this.changeStyle == 0){
          await this.getMembers()
        } else {
          await this.getChecked()
        }
        this.loading = false;
        if (this.list.length >= this.count) {
          this.finished = true;
        } else {
          this.params.page++;
        }
    },
    isShow(index) {
      this.params.page = 1
      this.list = []
      this.changeStyle = index
      this.onLoad()
    },
    // 请求待审会员
    getMembers() {
      return new Promise((resolve, reject) => {
        api.pendingMember(this.params).then(res => {
          this.count = res.count;
          this.list.push(...res.data)
          resolve(res);
        })
        .catch(error => {
          reject(error);
        });
      });
    },
    // 获取已审核会员
    getChecked(){
      return new Promise((resolve, reject) => {
        api.allMember(this.params).then(res => {
          if(res.data?.length > 0){
            this.count = res.count;
            this.list.push(...res.data)
          }
          resolve(res);
        })
        .catch(error => {
          reject(error);
        });
      });
    },
    disagree(){

    },
    // 审核
    Audit(status){
      let url,data,state;
      if(this.itemData.registerStatus == 0) {
        url = "first"
      } else if(this.itemData.registerStatus == 1) {
        url = "finally"
      }
      //registerStatus 0：未审核，1：通过初审，2：通过终审，3：驳回
      if(status == 3){

        if (this.itemData.registerStatus == 1) {
          state = 3;
        } else {
          state = 4;
        }
      } else {

        if (this.itemData.registerStatus == 0) {
          state = 1;
        } else {
          state = 2;
        }
      }
      data = {
        id: this.itemData.userId,
        status: state
      }
      api.MLAudit(url, {}, data).then(res => {
        if (res.code == "success") {
          Notify({ type: 'success', message: '审批成功' });
        } else {
          Notify({ type: 'danger', message: res.desc });
        }
        this.isAudit = false;
        this.params.page = 1
        this.list = []
        this.onLoad()
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.members{
    margin: 0 20px;
  .tabBar{
    width: 100%;
    height:40px;
    display: flex;
    .boxClick{
      width: 80px;
      height: 100%;
      font-size: 20px;
      font-weight: bold;
      border-bottom: 4px solid rgb(201,21,30);
    }
    .boxNoClick{
      width: 100px;
      height: 100%;
      font-size: 20px;
      margin-left: 20px;
      text-align: center;
    }
  }
  .dataList li {
    // height: 50px;
    margin-top: 20px;
    padding: 20px;
    // background-size: 50px;
    border-radius: 10px;
    box-shadow: 2px 2px 8px #f2f2f2, -2px -2px 8px #f2f2f2;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    .img-box{
        border-radius: 30px;
        width: 60px;
        height: 60px;
        overflow: hidden;
        display: flex;
        border: 1px solid #ccc;
        img{
          margin: auto;
        }
    }
    .content{
      margin-left: 20px;
      width:calc(100% - 160px);
      box-sizing: border-box;
      p {
        font-weight: bold;
        padding-bottom: 10px;
      }
      span{
        color: rgb(105,105,105);
      }
    }
    .audit{
      width: 80px;
      height: 26px;
      text-align: center;
      line-height: 26px;
      background: #9f1016;
      color: #fff;
      border-radius: 13px;
    }
    .auditPass{
      width: 80px;
      text-align: center;
      color: #9f1016;
    }
  }
}
</style>
